import Vue from 'vue'
import VueRouter from 'vue-router'

//import test from '../views/test.vue'
//动态导入组件，这样导入的好处是，单独组件的CSS JS资源会分开编译成多个文件，避免一个文件过大
const home = () => import('views/home/Home')
const category = () => import('views/category/Category')
const profile = () => import('views/profile/Profile')
const shopcart = () => import('views/shopcart/Shopcart')
const detail = () => import('views/detail/Detail')
//1.安装插件
Vue.use(VueRouter)
//2.创建路由对象
const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: home
  },
  {
    path: '/category',
    component: category
  },
  {
    path: '/shopcart',
    component: shopcart
  },
  {
    path: '/profile',
    component: profile
  },
  {
    path: '/detail/:iid',
    component: detail
  }
  
]
const router = new VueRouter({
  routes,
  mode: 'history'//路由模式 history模式。浏览器地址没有#符号 hash模式。浏览器有#符号
})

// 3. 导出路由对象
export default router